Integration af JavaScript-udviklingsværktøjer: Udvikling af VS Code-udvidelser

Visual Studio Code (VS Code) er blevet en dominerende kraft i verdenen af kodeeditorer, elsket af udviklere over hele kloden for sin fleksibilitet, sit rige økosystem af udvidelser og sit robuste funktionssæt. Et centralt aspekt af VS Code's styrke ligger i dens udvidelsesmuligheder, som giver udviklere mulighed for at skræddersy IDE'et til deres specifikke behov og arbejdsgange. Denne artikel giver en omfattende guide til integration af JavaScript-udviklingsværktøjer gennem udvikling af VS Code-udvidelser, der dækker alt fra det grundlæggende til avancerede teknikker.

Hvorfor udvikle VS Code-udvidelser til JavaScript?

Udvikling af VS Code-udvidelser til JavaScript giver talrige fordele, der påvirker individuelle udviklere, teams og det bredere JavaScript-fællesskab.

• Forbedret produktivitet: Automatiser gentagne opgaver, strømlin arbejdsgange og reducer manuelt arbejde, så udviklere kan fokusere på kerneforretningslogik og kreativ problemløsning.
• Tilpasset kodemiljø: Skræddersy IDE'et til specifikke projektkrav, kodestilarter og personlige præferencer, hvilket skaber en mere behagelig og effektiv udviklingsoplevelse.
• Forbedret kodekvalitet: Integrer lintere, formattere og kodeanalyseværktøjer direkte i editoren for at sikre kodekonsistens, identificere potentielle fejl og fremme bedste praksis.
• Problemfri værktøjsintegration: Bring eksterne værktøjer og tjenester direkte ind i VS Code, såsom build-systemer, testrammer og cloud-platforme, hvilket skaber et samlet og integreret udviklingsmiljø.
• Bidrag til fællesskabet: Del dine udvidelser med det bredere JavaScript-fællesskab, så andre udviklere kan drage fordel af dit arbejde og fremme samarbejde og innovation.

Grundlæggende om udvikling af VS Code-udvidelser

Før vi dykker ned i de tekniske detaljer, lad os dække de væsentlige koncepter og værktøjer, der kræves til udvikling af VS Code-udvidelser.

Forudsætninger

• Node.js og npm (eller yarn): Node.js leverer JavaScript-runtime-miljøet, og npm (Node Package Manager) eller yarn bruges til at administrere projektafhængigheder. Sørg for at have de nyeste versioner installeret. Download fra nodejs.org.
• VS Code: Selvfølgelig skal du bruge selve VS Code. Download fra code.visualstudio.com.
• Yeoman og VS Code Extension Generator: Yeoman er et stilladsværktøj, der forenkler oprettelsen af nye projekter. VS Code Extension Generator leverer en forudkonfigureret skabelon til VS Code-udvidelser. Installer dem globalt ved hjælp af npm:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Udvidelsesmanifest (package.json)

package.json-filen er hjertet i din udvidelse. Den definerer udvidelsens metadata, afhængigheder og aktiveringshændelser. Nøgleegenskaber inkluderer:

• name: Den unikke identifikator for din udvidelse.
• displayName: Det menneskeligt læsbare navn, der vises på VS Code-markedspladsen og i udvidelseslisten.
• description: En kort beskrivelse af udvidelsens formål.
• version: Udvidelsens versionsnummer.
• publisher: Din udgiver-ID (kræves for at udgive på VS Code-markedspladsen).
• engines.vscode: Den mindste VS Code-version, som udvidelsen kræver.
• activationEvents: En række hændelser, der udløser aktiveringen af din udvidelse. Almindelige hændelser inkluderer onCommand:yourCommandId, onLanguage:languageId og * (aktiveres ved opstart). Det er afgørende for ydeevnen at bruge specifikke aktiveringshændelser.
• main: Stien til den primære JavaScript-fil, der indeholder din udvidelses kode.
• contributes: Et objekt, der definerer udvidelsens bidrag til VS Code, såsom kommandoer, menuer, indstillinger og visninger.
• dependencies: En liste over npm-pakker, som din udvidelse afhænger af.
• devDependencies: En liste over npm-pakker, der kræves til udvikling, såsom testrammer og build-værktøjer.

Eksempel på package.json-uddrag:

            {
  "name": "my-javascript-tools",
  "displayName": "Mine JavaScript-værktøjer",
  "description": "En samling af nyttige JavaScript-udviklingsværktøjer.",
  "version": "0.0.1",
  "publisher": "min-udgiver",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Formater JavaScript-kode"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Udvidelses-API

VS Code's udvidelses-API giver et rigt sæt af grænseflader og funktioner til at interagere med editoren, få adgang til dens funktioner og manipulere dens adfærd. Gør dig bekendt med de centrale API-koncepter, herunder:

• vscode.commands: Registrer og udfør kommandoer.
• vscode.languages: Registrer sprogfunktioner, såsom kodefuldførelse, hovers og diagnostik.
• vscode.window: Interager med editorvinduet, vis meddelelser og bed om brugerinput.
• vscode.workspace: Få adgang til arbejdsområderelateret information, såsom filer, mapper og indstillinger.
• vscode.debug: Udvid debugging-muligheder.
• vscode.scm: Integrer med kildekontrolsystemer.

Aktiveringshændelser

Aktiveringshændelser er afgørende for at kontrollere, hvornår din udvidelse indlæses og aktiveres. Brug af specifikke aktiveringshændelser kan forbedre VS Code's opstartsydelse betydeligt. Almindelige aktiveringshændelser inkluderer:

• onCommand:<commandId>: Aktiveres, når en specifik kommando udføres.
• onLanguage:<languageId>: Aktiveres, når en fil af et specifikt sprog åbnes.
• onFileSystem:<scheme>: Aktiveres, når en fil med et specifikt filsystemskema åbnes (f.eks. file, git, ftp).
• onDebug: Aktiveres, når debuggeren startes.
• onTest: Aktiveres, når tests køres.
• onView:<viewId>: Aktiveres, når en specifik visning er synlig i sidepanelet.
• *: Aktiveres ved opstart (brug med måde, da det kan påvirke ydeevnen).

Oprettelse af din første VS Code-udvidelse

Lad os gennemgå processen med at oprette en simpel VS Code-udvidelse, der formaterer JavaScript-kode ved hjælp af Prettier.

Stilladsopbygning af udvidelsen

1. Åbn en terminal og naviger til den mappe, hvor du vil oprette din udvidelse.
2. Kør VS Code Extension Generator:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Svar på prompterne:
   • Vælg New JavaScript Extension.
   • Indtast udvidelsens navn (f.eks. javascript-formatter).
   • Indtast udvidelsens identifikator (f.eks. javascript-formatter).
   • Indtast en beskrivelse (f.eks. Formaterer JavaScript-kode ved hjælp af Prettier.).
   • Vælg, om du vil aktivere TypeScript (i dette eksempel bruger vi JavaScript, men TypeScript anbefales stærkt til større projekter).
   • Vælg, om du vil initialisere et Git-repository.

Installation af Prettier

Installer Prettier som en afhængighed for din udvidelse:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

Implementering af formateringslogikken

Åbn filen extension.js. Denne fil indeholder kerneforretningslogikken for din udvidelse. Erstat den eksisterende kode med følgende:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Tillykke, din udvidelse "javascript-formatter" er nu aktiv!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('Ingen aktiv teksteditor.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				railingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Fejl ved formatering af kode: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

Opdatering af package.json

Rediger filen package.json for at registrere kommandoen og specificere aktiveringshændelsen. Tilføj følgende til contributes-sektionen:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "Formater JavaScript-kode"
    }
  ]
},
            

              
                Copy
              
            
          

Og opdater activationEvents-sektionen:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

Test af udvidelsen

1. Tryk på F5 for at starte udvidelsen i et nyt VS Code-vindue (Extension Development Host).
2. Åbn en JavaScript-fil i Extension Development Host.
3. Tryk på Ctrl+Shift+P (eller Cmd+Shift+P på macOS) for at åbne kommandopaletten.
4. Indtast Formater JavaScript-kode og vælg kommandoen.
5. JavaScript-koden i den aktive editor skulle nu blive formateret med Prettier.

Avancerede teknikker til udvikling af VS Code-udvidelser

Når du har mestret det grundlæggende, kan du udforske mere avancerede teknikker til at skabe sofistikerede og kraftfulde VS Code-udvidelser.

Language Server Protocol (LSP)

Language Server Protocol (LSP) definerer en standardiseret måde for sprogservere at kommunikere med IDE'er. Brug af LSP giver dig mulighed for at levere avancerede sprogfunktioner, såsom:

• Kodefuldførelse (IntelliSense): Foreslå relevante kodefuldførelser baseret på den aktuelle kontekst.
• Gå til definition: Naviger til definitionen af et symbol.
• Find alle referencer: Find alle forekomster af et symbol i arbejdsområdet.
• Omdøb symbol: Omdøb et symbol og opdater alle referencer.
• Kodediagnostik (linting og fejlkontrol): Identificer potentielle fejl og giv forslag til forbedringer.

Biblioteker som vscode-languageserver forenkler udviklingen af LSP-baserede udvidelser.

Debugging-support

VS Code tilbyder en kraftfuld debugging-API, der giver dig mulighed for at udvide dens debugging-funktioner. Du kan:

• Oprette brugerdefinerede debug-adaptere: Understøtte debugging af brugerdefinerede sprog eller runtimes.
• Bidrage med debug-konfigurationer: Tilbyde forudkonfigurerede debug-konfigurationer for specifikke projekttyper.
• Tilføje brugerdefinerede debug-visninger: Vise debugging-information i brugerdefinerede visninger.

Arbejde med Webviews

Webviews giver dig mulighed for at indlejre webbaserede brugergrænseflader i VS Code. Dette er nyttigt til at oprette komplekse konfigurationspaneler, interaktive dokumentationsvisere eller visualiseringer. Du kan bruge HTML, CSS og JavaScript til at bygge brugergrænsefladen og kommunikere med udvidelsens backend ved hjælp af meddelelsesudveksling.

Indstillinger og konfiguration

Giv brugere mulighed for at tilpasse din udvidelses adfærd gennem indstillinger. Definer indstillinger i contributes.configuration-sektionen i package.json-filen. Få adgang til indstillinger ved hjælp af vscode.workspace.getConfiguration()-API'en.

Test af din udvidelse

Grundig test af din udvidelse er afgørende for at sikre dens kvalitet og pålidelighed. Brug testrammer som Mocha og Chai til at skrive enhedstests og integrationstests. VS Code har indbygget understøttelse for at køre tests inde i editoren.

Bedste praksis for udvikling af VS Code-udvidelser

Ved at følge disse bedste praksisser kan du skabe VS Code-udvidelser af høj kvalitet, der er vedligeholdelsesvenlige og brugervenlige:

• Brug TypeScript: TypeScript giver statisk typning, hvilket hjælper med at fange fejl tidligt og forbedrer kodens vedligeholdelsesvenlighed.
• Brug asynkron programmering: Undgå at blokere UI-tråden ved at bruge asynkrone programmeringsteknikker, såsom async/await.
• Håndter fejl elegant: Implementer korrekt fejlhåndtering for at forhindre nedbrud og give informative fejlmeddelelser til brugeren.
• Dokumenter din kode: Skriv klar og koncis dokumentation for at hjælpe andre udviklere med at forstå og bruge din udvidelse.
• Følg VS Code's retningslinjer for udvidelser: Overhold VS Code's retningslinjer for udvidelser for at sikre, at din udvidelse opfører sig korrekt og integreres problemfrit med editoren. Disse retningslinjer dækker emner som ydeevne, sikkerhed og brugeroplevelse.
• Brug semantisk versionering: Følg principperne for semantisk versionering (SemVer), når du udgiver nye versioner af din udvidelse.
• Hold din udvidelse opdateret: Opdater regelmæssigt din udvidelse for at inkludere nye funktioner, rette fejl og håndtere sikkerhedssårbarheder.
• Internationalisering (i18n) og lokalisering (l10n): Overvej det globale publikum for VS Code og design din udvidelse med i18n/l10n i tankerne. Dette indebærer at eksternalisere strenge og levere oversættelser til forskellige sprog.
• Tilgængelighed: Sørg for, at din udvidelse er tilgængelig for brugere med handicap. Følg retningslinjer for tilgængelighed, når du designer din brugergrænseflade, og overvej at bruge hjælpeteknologier til test.

Udgivelse af din udvidelse

Når du er tilfreds med din udvidelse, kan du udgive den på VS Code Marketplace, hvilket gør den tilgængelig for millioner af udviklere verden over.

1. Opret en Azure DevOps-konto: Du skal have en Azure DevOps-konto for at administrere dine udvidelser.
2. Installer vsce-værktøjet: VS Code Extension Manager (vsce) er et kommandolinjeværktøj til at pakke og udgive udvidelser.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Pak din udvidelse:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Udgiv din udvidelse:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Følg instruktionerne på VS Code Marketplace-webstedet for mere detaljerede oplysninger om udgivelse af din udvidelse.

Eksempler fra den virkelige verden på JavaScript VS Code-udvidelser

Her er et par eksempler på populære JavaScript VS Code-udvidelser, der demonstrerer styrken ved værktøjsintegration:

• ESLint: Integrerer ESLint-linteren i VS Code, hvilket giver realtids kodeanalyse og fremhæver potentielle fejl.
• Prettier: Formaterer automatisk JavaScript-kode i henhold til en ensartet stil.
• JavaScript (ES6) code snippets: Tilbyder en samling af nyttige kode-snippets til JavaScript-udvikling.
• Debugger for Chrome: Giver dig mulighed for at debugge JavaScript-kode, der kører i Chrome, direkte fra VS Code.
• npm Intellisense: Aut fuldfører npm-moduler i import-sætninger.

Disse udvidelser viser, hvordan VS Code kan tilpasses og udvides for at skabe et mere effektivt og produktivt udviklingsmiljø.

Konklusion

Udvikling af VS Code-udvidelser er en effektiv måde at forbedre din JavaScript-udviklingsworkflow på, integrere eksterne værktøjer og bidrage til det bredere JavaScript-fællesskab. Ved at mestre det grundlæggende i udvidelses-API'en, forstå avancerede teknikker og følge bedste praksis kan du skabe virkningsfulde udvidelser, der løser virkelige problemer og forbedrer livet for udviklere verden over. Omfavn styrken ved udvidelsesmuligheder og frigør det fulde potentiale i VS Code!